<template>
	<view>
		<view class="detail-box">
			<view class="title">
				{{detailObj.name}}
			</view>
			<view class="title-time">
				{{detailObj.updateTime}} 阅读 {{detailObj.readingQuantity == null ? '0' : detailObj.readingQuantity}}
			</view>
			<view class="video" v-if="detailObj.courseVoices && detailObj.courseVoices.length > 0">
				<WzsAudio ref="adudioPlay" :music="detailObj.courseVoices[0].url" :title="detailObj.courseVoices[0].name" :autoplay="false"></WzsAudio>
			</view>
			<view class="content">
				<!-- <video :src="detailObj.videoUrl" controls style="width: 100%;"></video> -->
				<video v-if="detailObj.videoUrl" class="detail-video" id="myVideo" :src="detailObj.videoUrl" controls @timeupdate="bindtimeupdate">
					<view class="detail-video-video" @click="isPlay()">
						
					</view>
				</video>
			</view>
			<view class="title-time" style="color: #000;" v-if="detailObj.author">
				作者：{{detailObj.author}}
			</view>
			<view class="title-time" style="color: #000;" v-if="detailObj.creatorName">
				上传人：{{detailObj.creatorName}}
			</view>
			<view class="content">
				<u-parse :html="detailObj.content"></u-parse>
			</view>
			<u-button v-if="!detailObj.learned" type="primary" :custom-style="customStyleButtonFalse" hover-class="none" @longpress="getLearnedCourseId(detailObj.id)" @touchend="endTouch">   
				学习中
			</u-button>
			<u-button v-else type="primary" :custom-style="customStyleButton" hover-class="none" @click="getLearnedCourseId(detailObj.id)">已学习完成</u-button>
		</view>
	</view>
</template>

<script>
	import WzsAudio from '@/components/WZS-Audio/WZS-Audio.vue'
	import {  baseUrl} from '../../api/index.js'
	import { booksDetail, learnedCourseId, authReport } from '../../api/api.js'
	import xAdudioPlay from '@/components/x-audio-play/x-audio-play.vue'
	export default {
		components: {xAdudioPlay,WzsAudio},
		data() {
			return {
				customStyleButton:{
					margin:'50rpx 0',
					backgroundColor:'#F18B3A',
					borderRadius: '12rpx',
					height: '88rpx'
				},
				customStyleButtonFalse:{
					margin:'50rpx 0',
					backgroundColor:'#ccc',
					borderRadius: '12rpx',
					height: '88rpx'
				},
				detailObj:{},
				timer:null,
				videoContext: '',
				isFalgPlay: false,
				historyTime: 0,
				
				timer2: null,
				timeNum: 0
			}
		},
		onShow() {
			uni.setStorageSync('learnedId', '')
			if(this.$refs.adudioPlay){
				this.$refs.adudioPlay.stopPlay()
			}
		},
		onLoad(query) {
			uni.setNavigationBarTitle({
			    title:query.title
			})
			this.getBooksDetail(query.id)
		},
		methods: {
			// 监听播放进度
			bindtimeupdate(e) {
				var currentTime = e.detail.currentTime; //当前进度
				var duration = e.detail.duration; //视频时长
			 
				// 禁止拖动进度条快进
				if (currentTime - this.historyTime > 2) {
					let videoContext = wx.createVideoContext('myVideo');
					videoContext.seek(this.historyTime);
				}
				this.historyTime=currentTime;
				if(this.historyTime >= duration){
					this.isFalgPlay = false
					if(this.timer2){
						clearInterval(this.timer2)
						this.timer2 = null
					}
				}
			},
			isPlay(){
				if(this.isFalgPlay){
					this.isFalgPlay = false
					this.videoContext.pause()
					if(this.timer2){
						clearInterval(this.timer2)
						this.timer2 = null
					}
				}else{
					this.isFalgPlay = true
					this.videoContext.play()
					this.timer2 = setInterval(()=>{
						this.timeNum++
						if(this.timeNum == 5){
							this.upAuthReport()
						}
					},1000)
				}
			},
			// 上报
			upAuthReport(){
				this.timeNum = 0
				if(this.timer2){
					clearInterval(this.timer2)
					this.timer2 = null
				}
				authReport({targetId: this.detailObj.id}).then(resp=>{
					this.timer2 = setInterval(()=>{
						this.timeNum++
						if(this.timeNum == 5){
							this.upAuthReport()
						}
					},1000)
				})
			},
			getBooksDetail(id){
				let self = this
				booksDetail({id:id}).then(resp=>{
					if(JSON.stringify(resp) != '{}'){
						if(resp.courseVoices.length > 0){
							resp.courseVoices[0].url = baseUrl + resp.courseVoices[0].url
						}
						if(!resp.learned){
							let number = 180
							self.timer = setInterval(()=>{
								number--
								if(number==0){
									clearInterval(self.timer)
									self.timer = null
									self.getLearnedCourseId(id)
								}
							},1000)
						}
						if(resp.videoUrl){
							this.videoContext = uni.createVideoContext('myVideo')
						}
						if(resp.content){
							resp.content = resp.content.replace(/<img/gi, '<img class="image-wrap"')
						}
						this.detailObj = resp
					}
				})
			},
			getLearnedCourseId(id){
				this.timer = setTimeout(()=>{
					let parmes = {
						courseId: id
					}
					learnedCourseId(parmes).then(resp=>{
						this.getBooksDetail(id)
						uni.setStorageSync('learnedId', id)
					})
				},5000)
				
			},
			endTouch(){
				clearInterval(this.timer)
			}
		},
		destroyed() {
			if(this.timer){
				clearInterval(this.timer)
				this.timer = null
			}
			if(this.timer2){
				clearInterval(this.timer2)
				this.timer2 = null
			}
		}
	}
</script>

<style lang="scss" scoped>
.detail-box{
	padding: 20rpx 40rpx;
	.title{
		font-size: 36rpx;
		height: 80rpx;
		line-height: 100rpx;
		overflow: hidden;
	}
	.title-time{
		font-size: 26rpx;
		color: #C0C0C0;
		height: 50rpx;
		line-height: 50rpx;
	}
	.video{
		margin-top: 50rpx;
		width: 100%;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		padding: 20rpx;
		.title{
			font-size: 32rpx;
			line-height: 60rpx;
			height: 60rpx;
		}
	}
	.content{
		padding-top: 40rpx;
		.title{
			font-size: 36rpx;
			color: #F18B3A;
			line-height: 80rpx;
			height: 80rpx;
		}
		.content-one{
			padding-top: 10rpx;
			.content-content{
				text-indent: 2em;
				line-height: 60rpx;
				font-size: 30rpx;
			}
		}
		.detail-video{
			width: 100%;
			height: 400rpx;
			position: relative;
			&-video{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 99;
			}
		}
	}
	.zhunbei{
		margin: 0 0 0 40rpx;
		margin-top: 80rpx;
		background: #FAFAFA;
		border-radius: 10rpx;
		padding: 60rpx 30rpx 30rpx;
		position: relative;
		.title{
			position: absolute;
			left: -40rpx;
			top: -20rpx;
			background-color: #F18B3A;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
			border-radius: 10rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			padding: 0 40rpx;
			z-index: 99;
			display: inline-block;
			color: #fff;
		}
		.man{
			text-align: center;
			margin-top: 40rpx;
			height: 188rpx;
			image{
				width: 128rpx;
				height: 128rpx;
				border-radius: 10rpx;
			}
			.man-title{
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
			}
		}
		.gongju{
			margin-top: 40rpx;
			.gongju-title{
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
}
</style>
